// 导入React
import React from "react";

/**
 * 目标：this.state的基本使用
 * 创建一个类组件，显示当前时间
 * 1. 创建类组件
 * 2. 创建构造函数
 * 3. 在构造函数函数中初始化状态容器
 * 4. 在标签中显示状态数据
 * 5. 修改组件状态
 * 6. 抽离状态修改到单独的事件处理函数中
 */

 class Timer extends React.Component{

    constructor(props) {
        super(props)
    
        this.state = {
             time: new Date().toLocaleTimeString()
        }
    }

    handleClick(){
        console.log('箭头函数方式')
        this.setState({
            time: new Date().toLocaleTimeString()
        })
    }

    render(){
        return (
            <div>
                <h1>当前时间是</h1>
                <h2>{this.state.time}</h2>
                <button onClick={() => this.handleClick()}>点击查看最新时间</button>
            </div>
        )
    }
}

export default Timer